function MessageBoard(boardId)
{
    // Create the array containing the messages.
    var messages = new Array();
    
    this.getMessages = function()
    {
        return messages;
    }
    
    this.addMessage = function(message)
    {
        messages.push(message);
    }
    
    this.removeMessage = function(messageId)
    {
        messages.splice(messageId, 1);
    }
    
    // Get the container element.
    var container = document.getElementById("container");
    
    // Render the MessageBoard.
    this.renderMessageBoard(container, boardId);
    
    // Render the number of messages.
    this.updateNumberOfMessages();
    
    // Load all messages.
    this.renderMessages();
}

MessageBoard.prototype.renderMessageBoard = function(container, _boardId)
{
    var that = this;
    
    // Create the app board itself.
    var boardNode = document.createElement("div");
    boardNode.id = _boardId;
    boardNode.className = "messageApp"
    
    // Create the message container.
    var messageContainerNode = document.createElement("div");
    messageContainerNode.className = "messageContainer";
    
    // Create the element containing the number of messages.
    var nrOfMess = document.createElement("div");
    nrOfMess.className = "numberOfMessages";
    
    // Create the input area.
    var inputArea = document.createElement("textarea");
    inputArea.className = "messageInputArea";
    
    // Add an eventHandler to the textarea.
    inputArea.onkeypress = function(e){that.textAreaEventHandler(e, inputArea); false;};    
    
    // Create the post button.
    var postButton = document.createElement("button");
    postButton.className = "postMessageButton";
    postButton.innerHTML ="skriv";
    
    // Add an onclick event to the postMessageButton.
    postButton.onclick = function(e){that.postButtonOnClick(inputArea); return false;};   
    
    // Append all nodes.
    container.appendChild(boardNode);
    boardNode.appendChild(messageContainerNode);
    boardNode.appendChild(nrOfMess);
    boardNode.appendChild(inputArea);
    boardNode.appendChild(postButton);
    
}

MessageBoard.prototype.postButtonOnClick = function(textarea)
{
    // Get the text.
    var text = textarea.value;
    
    // Check if the user actually wrote something.
    if (text.length > 0)
    {
        // Create a new Message using the text from the textarea.
        var mess = new Message(text, new Date());
        
        // Add the message to the array.
        this.addMessage(mess);
        
        // Render the new message.
        this.renderMessage(this.getMessages().length-1);
        
        // Update the number of messages since we added a new one.
        this.updateNumberOfMessages();
    }
    textarea.value = '';
}

MessageBoard.prototype.textAreaEventHandler = function(e, area)
{
    if (!e) var e = window.event;
    
    if (e.keyCode == 13 && !e.shiftKey)
    {
        this.postButtonOnClick(area);
    }
}

MessageBoard.prototype.renderMessage = function(messageId)
{
    var that = this;
    
    // Create the new node containing a message.
    var newMessageNode = document.createElement("div");
    newMessageNode.className = "message";
    
    // Create the content for the new node and add it.
    var htmlString = "<div>" + this.getMessages()[messageId].getHTMLText() + "</div>" +
                     "<div class=\"timeStamp\">" + this.getMessages()[messageId].getTimeStamp() + "</div>";
    newMessageNode.innerHTML = htmlString;
    
    
    // Create a close message element.
    var closeNode = document.createElement("div");
    closeNode.className = "close";
        
    // Create an element to show an alert with the date and time.
    var dateAlertNode = document.createElement("div");
    dateAlertNode.className = "dateAlert";
        
    // Add the elements to the message node.
    newMessageNode.appendChild(closeNode); 
    newMessageNode.appendChild(dateAlertNode);
    
    // Create the onclick events.
    closeNode.onclick = function(){that.removeMessageById(messageId)};
    dateAlertNode.onclick = function(){that.showDateTimeAlert(messageId)};  
    
    // Add the new message to the container.
    var elements = document.getElementsByClassName("messageContainer");
    
    console.log(elements.length);
    for (var nrOfElement = 0; nrOfElement < elements.length; nrOfElement++)
    {
        elements[nrOfElement].appendChild(newMessageNode);
    }
}

MessageBoard.prototype.renderMessages = function()
{
    // Remove all messages from the html.
    document.getElementsByClassName("messageContainer").innerHTML = "";
    
    // Render all the messages again.
    for (var mIndex = 0; mIndex < this.getMessages().length; mIndex++)
    {
        this.renderMessage(mIndex);
    }
}

MessageBoard.prototype.updateNumberOfMessages = function()
{
    // Get the counter elements.
    var elements = document.getElementsByClassName("numberOfMessages");
    
    // Get the number of messages and construct the string.
    var nrOfMessString = "Antal meddelanden: " + this.getMessages().length;
    
    // For each counter element, set the number of messages.
    for (var eIndex = 0; eIndex < elements.length; eIndex++)
    {
        elements[eIndex].innerHTML = nrOfMessString;
    }
}

MessageBoard.prototype.showDateTimeAlert = function(messageId)
{
    var that = this;
    var alertMessage = "Inlägget skapades den " + this.getMessages()[messageId].getFormatedDateTime();
    alert(alertMessage);
}

MessageBoard.prototype.removeMessageById = function(messageId)
{
    if (window.confirm("Vill du verkligen radera meddelandet?"))
    {
        // Remove the message.
        this.removeMessage(messageId);
        
        // Render all the messages again.
        this.renderMessages();
        
        // Update the number of messages.
        this.updateNumberOfMessages();  
    }  
}

window.onload = function()
{
    new MessageBoard("board1");
    new MessageBoard("board2");
}